<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script scr=".js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>>
		<script type="text/javascript">
		    function add(){
				let ruzhu = $("#ruzhu").val();
				let shijian = $("#shijian").val();
				let shenfen = $("#shenfen").val();
				let tuifang = $("#tuifang").val();			
				let count = $("tbody>tr").length + 1;			
				let rowItem =`<tr>
			        <td>${count}</td>
					<td>${ruzhu}</td>>
					<td>${shijian}</td>>
					<td>${shenfen}</td>>
					<td>${tuifang}</td>>
					<td><button type="button" onclick="del(this)">删除</button></td>
				</tr>`
			$("tbody").append(rowItem);			
		}
		function del(btn){
			$(btn).parent().parent().remove;			
		}
		
		</script>
	</head>
	<body>
		<form >
			办理入住：<input type="text" name="" id="ruzhu" value="" /> <br>
			入住时间：<input type="text" name="" id="shijian" value="" /> <br>
			身份证号：<input type="text" name="" id="shenfen" value="" /> <br>
			退房时间：<input type="text" name="" id="tuifang" value="" /> <br>
			<button type="button" onclick="add()">添加</button>
		</form>
		<table border = "1px" cellspacing="0" cellspading="0">
			<thead>
				<th>序号</th>
				<th>办理入住</th>
				<th>入住时间</th>>
				<th>身份证号</th>
				<th>退房时间</th>
				<th>操作</th>
			</thead>	
				<tbody>
					
				</tbody>
		</table>
	</body>
</html>